<template>
  <div class="relative" style="display: inline-block">
    <div ref="myChartDom" style="width: 200px;height: 90px">

    </div>
    <div class="chartInfo" v-if="type !== 1">
      <div class="infoDec">
        平均每项目<br/>视频监控数
        </div>
      <div class="line"></div>
      <div class="infoNum">{{Math.round(Number(videoAvgNum)) || 0}}</div>
    </div>
    <div class="chartDec" v-if="type === 1">设备监控项目覆盖率</div>
    <div class="chartDec" v-else>视频监控项目覆盖率</div>
  </div>

</template>

<script>
    export default {
      name: 'safeMonitor',
      props: {
        type: {
          default: 1,
          type: Number
        },
        chartData: {
          default: 0.5,
          type: Number
        },
        videoAvgNum: {
          default: 0,
          type: Number
        }
      },
      watch: {
        chartData () {
          if (this.type === 1) {
            this.initDevice()
          } else {
            this.initVideo()
          }
        }
      },
      mounted () {
        if (this.type === 1) {
          this.initDevice()
        } else {
          this.initVideo()
        }
      },
      methods: {
        initDevice () {
          let myChart = this.$echarts.init(this.$refs.myChartDom)
          let option = {
            series: [{
              type: 'liquidFill',
              data: [this.chartData, this.chartData - 0.1],
              radius: '95%',
              // 水球颜色
              color: ['#136291', '#1fadff'],
              center: ['50%', '50%'],
              outline: {
                // show: false
                borderDistance: 2,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: '#1fadff'
                }
              },
              label: {
                normal: {
                  color: '#fff',
                  insideColor: '#fff',
                  fontSize: 14,
                  formatter: () => {
                    if (this.chartData === 0) {
                      return this.chartData + '%'
                    } else {
                      return (this.chartData * 100).toFixed(1) + '%'
                    }
                  }
                }
              },
              // 内图 背景色 边
              backgroundStyle: {
                color: 'rgba(4,24,74, 0)'
              }
            }]
          }
          myChart.setOption(option)
        },
        initVideo () {
          let myChart = this.$echarts.init(this.$refs.myChartDom)
          let option = {
            series: [{
              type: 'liquidFill',
              data: [this.chartData, this.chartData - 0.1],
              radius: '95%',
              // 水球颜色
              color: ['#175465', '#39c8d7'],
              center: ['50%', '50%'],
              outline: {
                // show: false
                borderDistance: 2,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: '#39c8d7'
                }
              },
              label: {
                normal: {
                  color: '#fff',
                  insideColor: '#fff',
                  fontSize: 14,
                  formatter: () => {
                    if (this.chartData === 0) {
                      return this.chartData + '%'
                    } else {
                      return (this.chartData * 100).toFixed(1) + '%'
                    }
                  }
                }
              },
              // 内图 背景色 边
              backgroundStyle: {
                color: 'rgba(4,24,74, 0)'
              }
            }]
          }
          myChart.setOption(option)
        }
      }

    }
</script>

<style scoped lang="scss">
  .chartDec {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .chartInfo{
    position: absolute;
    width: 90px;
    top: 0px;
    right: -20px;
    text-align: right;
    .infoDec{
      font-size:12px;
      font-weight:400;
      color:rgba(162,189,227,1);
      line-height:18px;
    }
    .line{
      background-image: url("/static/images/bgy-company-safeLine.png");
      height: 10px;
    }
    .infoNum{
      font-size:16px;
      font-weight:bold;
      color:rgba(0,232,255,1);
    }
  }

</style>
